import { useEffect, useState, useMemo } from "react";
import { Form, Skeleton, ErrorBlock, Grid } from 'antd-mobile';
import { Radar } from '@ant-design/plots';
import { HistogramOutline, FrownOutline } from 'antd-mobile-icons';
import { useSelector, useDispatch } from 'react-redux';
import { PortraitAnalysisTitle } from './PortraitAnalysisTitle';
import { fetchExplain0 } from '../slices/questionsSlice';
import { useWindowSize } from "@uidotdev/usehooks";
import { Explain } from './Explain';


export function SubjectRadar({ data }) {
    const dispatch = useDispatch();
    const analysis = useSelector(state => state.questions.present.analysis);
    const explain0 = useSelector(state => state.questions.present.explain0);
    const [loading, setLoading] = useState(true);
    const [explainVisible, setExplainVisible] = useState(false);
    const { width: windowWidth, } = useWindowSize();
    const chartsColumn = useMemo(() => windowWidth < 700 ? 1 : 2, [windowWidth]);
    const chartsSpan = useMemo(() => (chartsColumn === 2 && !explainVisible) ? 2 : 1, [chartsColumn, explainVisible]);
    useEffect(() => {
        let timeout;
        function init() {
            setLoading(true);
            setExplainVisible(false);
            if (analysis?.status === 'success') {
                timeout = setTimeout(() => setLoading(false), 1000);
            }
        }
        init();
        return () => clearTimeout(timeout);
    }, [data, analysis?.status]);
    useEffect(() => {
        let timeout;
        if (explainVisible && explain0?.status !== 'success' && explain0?.status !== 'pending') {
            function fetch() {
                timeout = setTimeout(() => dispatch(fetchExplain0(data)), 100);
            }
            fetch();
        }
        return () => clearTimeout(timeout);
    }, [explainVisible, explain0?.status, data, dispatch]);

    return analysis && <Form.Item
        label={loading ? "" : <>
            <HistogramOutline color='#000' />&nbsp;
            <PortraitAnalysisTitle
                text={"您的学科画像分析。"}
                explainLabelStyle={{ textDecoration: "underline", color: "#229880", cursor: "pointer" }}
                explainLabel={data && data.length > 0 ? (explainVisible ? "收起解释" : "解释此画像") : ""}
                onClickExplain={() => setExplainVisible(!explainVisible)}
                speed={10}
            >
            </PortraitAnalysisTitle>
        </>}
    >
        {
            loading ?
                <>
                    <Skeleton.Title animated />
                    <Skeleton.Paragraph lineCount={7} animated />
                </>
                :
                (
                    data && data.length > 0 ?
                        <>
                            <Grid columns={chartsColumn} gap={8}>
                                <Grid.Item span={chartsSpan}>
                                    <Radar {...{
                                        data: [...data].sort((a, b) => a?.label.localeCompare(b?.label)),
                                        xField: 'label',
                                        yField: 'score',
                                        theme: {
                                            defaultColor: '#19556e'
                                        },
                                        lineStyle: {
                                            fill: 'rgba(34, 152, 128, 0.5)',
                                            fillOpacity: 0.5,
                                            stroke: '#227598',
                                            lineWidth: 1.5,
                                            lineDash: [5, 3],
                                            strokeOpacity: 0.7,
                                            shadowColor: 'rgba(34, 152, 128, 0.9)',
                                        },
                                        meta: {
                                            score: {
                                                alias: '分数',
                                                min: 0,
                                                max: 100,
                                            },
                                        },
                                        xAxis: {
                                            line: null,
                                            tickLine: null,
                                            grid: {
                                                line: {
                                                    style: {
                                                        lineDash: null,
                                                    },
                                                },
                                            },
                                        },
                                        yAxis: {
                                            line: null,
                                            tickLine: null,
                                            grid: {
                                                line: {
                                                    type: 'line',
                                                    style: {
                                                        lineDash: null,
                                                    },
                                                },
                                                alternateColor: 'rgba(231, 244, 255, 0.9)',
                                            },
                                        },
                                        area: {},
                                        point: {
                                            size: 5,
                                        },
                                    }} />
                                </Grid.Item>
                                {
                                    explainVisible && <Grid.Item>
                                        <Explain data={explain0}></Explain>
                                    </Grid.Item>
                                }

                            </Grid>
                        </>
                        :
                        <>
                            <ErrorBlock status='default' description={
                                <span>
                                    <FrownOutline color='#000' />
                                    请输入您的喜好学科。
                                </span>
                            } />
                        </>
                )
        }

    </Form.Item>;
}
